<template>
  <section>
    <base-modal :show.sync="show" width="600px" class="plan-task-edit-modal" @closed="reset">
      <div slot="title">
        <div class="plan-task-edit-modal-title"> 
          {{ title }} 
          <el-tooltip placement="right">
            <div slot="content" v-html="$t('task.tip.planTaskTip1')"></div>
            <i class="iconfont icon-question-circle"></i>
          </el-tooltip>
        </div>
      </div>
      <div class="plan-task-edit-modal-title-tips">
        <BaseAlert type="warning">
          {{$t('task.tip.planTaskTip2')}}
        </BaseAlert>
      </div>

      <div class="build-stage">

        <el-form ref="form" :model="form" :rules="rules" label-position="top">
          
          <!-- start 计划名称 -->
          <el-form-item :label="`${$t('task.edit.planName')}`" prop="name">
            <el-input v-model="form.name" @change="validate" :maxlength="50"></el-input>
          </el-form-item>
          <!-- end 计划名称 -->   

          <!-- start 生成规则 -->
          <el-form-item prop="createRule" v-if="isBgiSaas">
            <!-- start label -->
            <template slot="label">
              {{$t('task.edit.generateRules.label')}} 
              <el-tooltip placement="right">
                <div slot="content" v-html="$t('task.tip.generateRulesTip')"></div>
                <i class="iconfont icon-question-circle"></i>
              </el-tooltip>
            </template>
            <!-- end label -->
            <el-radio-group v-model="form.createRule">
              <el-radio :label="0" :disabled="createSingleRuleDisabled"> {{ $t('task.edit.generateRules.single') }}</el-radio>
              <el-radio :label="1"> {{ $t('task.edit.generateRules.multiple') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- end 生成规则 -->   

          <!-- start 创建时间 :error="isCalendar ? (validation.planTimeType || validation.advance) : validation.advance" required-->
          <el-form-item :prop="isCalendar ? 'planTimeType' : 'advance'">
            <!-- start label -->
            <template slot="label">
              {{$t('task.taskTypes.planTask.start')}}
              <el-tooltip placement="right">
                <div slot="content" v-html="$t('task.tip.planTaskTip7')"></div>
                <i class="iconfont icon-question-circle"></i>
              </el-tooltip>
              <span v-if="isCalendar" class="start-tips">{{$t('task.tip.planTaskTip8')}}</span>
            </template>
            <!-- end label -->
            {{$t('task.edit.at')}}
            <el-select
              v-model="form.planTimeType"
              style="width:125px !important;margin:0 5px;"
              :placeholder="$t('common.placeholder.select')"
              v-if="isCalendar"
              @input="changePlanTimeType"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- 计划时间 -->
            <span v-else>{{$t('common.form.type.planTime')}}</span>
            <i18n path="task.edit.frontDayCreateTask">
              <el-input place="num" class="plan-task-edit-create-time" :value="form.advance" @input="changeAdvance"></el-input>
            </i18n>
          </el-form-item>
          <!-- end 创建时间 -->    

          <!-- start 重复周期 -->
          <el-form-item prop="period">
            <!-- start label -->
            <template slot="label">
              {{$t('task.edit.repeatPeriod')}}
              <el-tooltip placement="right">
                <div slot="content" v-html="$t('task.tip.planTaskTip3')"></div>
                <i class="iconfont icon-question-circle"></i>
              </el-tooltip>
            </template>
            <!-- end label -->
            <el-select class="plan-task-edit-repetion-time" v-model="form.periodUnit" :placeholder="$t('task.tip.planTaskTip4')" style="width: 100%;">
              <el-option
                v-for="item in repetitionPeriodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            {{$t('common.base.per')}}
            <el-input class="plan-task-edit-repetion-num" :value="form.period" @input="changePeriod"></el-input>
            {{form.periodUnit}}{{$t('task.edit.createExecuteTask')}}
          </el-form-item>
          <!-- end 重复周期 -->

          <!-- start 截止 :error="isEndTime ? validation.endTime : validation.endNum" required-->
          <el-form-item :prop="isEndTime ? 'endTime' : 'endNum'">
            <!-- start label -->
            <template slot="label">
              {{$t('task.taskTypes.planTask.end')}}
              <el-tooltip placement="right">
                <div slot="content" v-html="$t('task.tip.planTaskTip5')"></div>
                <i class="iconfont icon-question-circle"></i>
              </el-tooltip>
            </template>
            <!-- end label -->
            <el-select class="plan-task-edit-abort-select" v-model="form.endSetting.select" :placeholder="$t('task.tip.planTaskTip4')" style="width: 100%;">
              <el-option
                v-for="item in abortList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- start 按截止日期 -->
            <el-date-picker
              v-if="isEndTime"
              v-model="form.endTime"
              @change="validate"
              :editable="false"
              type="date"
              prefix-icon="iconfont icon-fd-date"
              clearable
              :placeholder="$t('task.tip.planTaskTip6')"
              value-format="timestamp"
              default-time="23:59:59"
            >
            </el-date-picker>
            <!-- end 按截止日期 -->

            <!-- start 按执行次数 -->
            <el-input v-else class="plan-task-edit-abort-num" :value="form.endNum" @input="changeEndSettingNum"></el-input>
            <!-- end 按执行次数 -->

          </el-form-item>
          <!-- end 截止 -->
          

          <div class="plan-task-edit-modal-subtitle">
            {{$t('task.edit.allotSetting')}}
            <el-tooltip placement="right">
              <div slot="content" v-html="$t('task.tip.planTaskTip9')"></div>
              <i class="iconfont icon-info"></i>
            </el-tooltip>
          </div>

          <!-- start 工单分配负责人/协同人select -->
          <task-allot-select 
            ref="TaskAllotSelect"
            :task-config="taskConfig"
            @update:type="changeAllotType"
            @update:synergies="changeSynergies"
            @update:executors="changeExecutors"
          >
          </task-allot-select>
          <!-- end -->

        </el-form>
      </div>
      <template slot="footer">
        <div class="dialog-footer">
          <el-button @click="show = false" :disabled="pending">{{$t('common.base.cancel')}}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="pending">{{$t('common.base.makeSure')}}</el-button>
        </div>
      </template>

    </base-modal>
  </section>
</template>

<script>
import PlanTaskEditForm from './PlanTaskEditForm';
export default PlanTaskEditForm
</script>

<style lang="scss" scope>
  @import './PlanTaskEditForm';
</style>
